<template>
  <el-dialog
    v-toggle-full
    class="base-dialog"
    :class="{ readonly: done !== false }"
    :custom-class="customClass"
    :title="title"
    :visible.sync="isShowDialog"
    :append-to-body="true"
    :before-close="handleCloseDialog"
    @closed="closedDialog"
  >
    <div class="main-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="dataList.BusinessForm" name="first">
          <component
            :is="dynamicAuditComponent"
            :ref="dynamicAuditComponent"
            :active-name.sync="activeName"
            :page-info.sync="pageInfo"
            :edit-id.sync="editId"
            :task-data.sync="taskData"
            :report-data.sync="reportData"
            :row.sync="row"
            :from-source="fromSource"
            @passOrNoPassEmit="passOrNoPassEmit"
          />
        </el-tab-pane>
        <el-tab-pane :label="dataList.ApprovalProcess" name="second">
          <ExperimentTemplateEdit
            v-if="activeName == 'second' && refurbish == true"
            ref="ExperimentTemplateEdit"
            :active-name.sync="activeName"
            :page-info.sync="pageInfo"
            :page-type="pageType"
            :row="row"
            :report-data.sync="reportData"
            :data.sync="taskData"
            :edit-id.sync="editId"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <span
      v-if="done === false || row.auditStatus == 70"
      slot="footer"
      class="base-dialog-footer"
    >
      <el-button type="danger" @click="chehuiDialog">{{ dataList.Retract }}</el-button>
    </span>

    <el-dialog
      v-if="isShowChildDialog"
      class="base-dialog"
      :custom-class="' panna-dialog_small'"
      :title="dataList.ReasonForWithdrawal"
      :visible.sync="isShowChildDialog"
      :append-to-body="true"
      :before-close="handleCloseChildDialog"
      @closed="closedChildDialog"
    >
      <el-form
        ref="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        :model="ruleForm"
      >
        <el-form-item :label="dataList.ReasonForWithdrawal" prop="remark">
          <el-input
            v-if="row.auditStatus !== 30"
            v-model="ruleForm.remark"
            type="textarea"
            maxlength="80"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="base-dialog-footer">
        <el-button type="primary" @click="chehui">{{ btn.Confirm }}</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import ExperimentTemplateEdit from "./ExperimentTemplateEdit.vue";
import { loadAllComponent } from "@/components/AuditComponents/index.js";

export default {
  name: "WorkFlowDetailDialog",
  components: {
    ExperimentTemplateEdit,
  },
  props: {
    done: {
      type: Boolean,
      default: false,
    },
    isShowDialog: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: [String, Number],
      default: "",
    },
    pageType: {
      type: [String, Number],
      default: "",
    },
    row: {
      type: Object,
      default: () => { },
    },
    taskData: {
      type: Object,
      default: () => { },
    },
    reportData: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      refurbish: true,
      isShowChildDialog: false,
      ruleForm: {
        remark: "",
      },
      rules: {
        remark: [
          { required: true, message: this.$t("ModuleWorkFlow.WorkFlow.TheReasonForWithdrawal"), trigger: "blur" },
          {
            min: 1,
            max: 80,
            message: this.$t("ModuleWorkFlow.WorkFlow.to80Characters"),
            trigger: "blur",
          },
        ],
      },
      customClass: "panna-dialog_big",
      fromSource: "verify",
      dynamicAuditComponent: null, // 定义动态审核组件
      history: "init",
      activeName: "first",
      pageInfo: {
        total: 0,
        pageIndex: 1,
        pageSize: 10,
      },
      submitLoad: false,
      dataForm: {},
      readOnly: false,
      title: this.$t("ModuleWorkFlow.buttons.Look"),
      total: 0,
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleWorkFlow.buttons");
    },
    dataList() {
      return this.$t("ModuleWorkFlow.WorkFlow");
    },
  },
  watch: {
    pageType: {
      handler(value) {
        this.autoLoadAuditComponent(value);
      },
      immediate: true,
    },
  },
  created() {
    loadAllComponent();
    this.title = this.row.content;
    // this.customClass = this.row.className;
  },
  methods: {
    // 动态加载组件
    autoLoadAuditComponent(value) {
      this.dynamicAuditComponent = value;
    },
    passOrNoPassEmit() {
      // this.refurbish = false;
      // this.$nextTick(() => {
      //   this.refurbish = true;
      // });
      this.$refs["ruleForm"].resetFields();
      this.$emit("update:isShowDialog", false);
      // this.isShowChildDialog = false;
      // this.$emit("update:isShowDialog", false);
      this.$emit("getList");
    },
    chehuiDialog() {
      this.isShowChildDialog = true;
    },
    // 不通过

    chehui() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          var obj = {};
          obj.auditDataId = this.row.auditDataId;
          obj.remark = this.ruleForm.remark;
          obj.dataGroup = this.row.dataGroup;
          this.$refs[this.dynamicAuditComponent].innerWithdraw(obj);
        } else {
          return false;
        }
      });
    },
    handleClick() { },
    init() {
      this.id = this.editId;
      this.title = this.$t("ModuleWorkFlow.buttons.Look");
    },
    // 保存
    submitForm() {
      this.submitLoad = true;
    },

    // 操作成功回调用
    successfulOperation() {
      this.$emit("success");
      this.$emit("getList");
      this.handleClose();
    },
    // 关闭弹框
    handleClose() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$emit("update:isShowDialog", false);
    },
    // 关闭客户弹框没保存
    handleCloseDialog() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$emit("update:isShowDialog", false);
    },
    handleCloseChildDialog() {
      this.$refs["ruleForm"].resetFields();
      this.isShowChildDialog = false;
    },
    closedChildDialog() {
      this.$refs["ruleForm"].resetFields();
      this.isShowChildDialog = false;
    },
    // 关闭弹框动画结束
    closedDialog() {
      // 动画结束后在清空表单 防止页面闪烁
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__item.is-active {
  color: #4787ff;
}

.avatar-pane {
  height: 500px;
}

::v-deep .el-collapse-item__header {
  height: 38px;
  line-height: 20px;
  padding: 4px;
  background-color: #f1f8ff;
}

::v-deep .el-collapse-item__content {
  padding-top: 25px;
  padding-bottom: 12.5px;
}
</style>
